<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
            //创建和初始化数组
            var course=new Array();
            course["初级"]=['Java基础上','Java基础下','初级项目']
            course["中级"]=['Web前端技术','Oracle数据库','Web后端技术','中级项目']
            course["高级"]=['Hibernate','Stucts','Spring','高级项目']
            
            //初始化第一级下拉选择框
			function initStage(){
				var stageSel=document.getElementById("stge");
				for(var i in course){//使用for…in…循环
					stageSel.add(new Option(i,i),null)
				}
			}
			window.onload=initStage;
			
			
			//第二级下拉选择框，随第一级下拉框动态变化
			function changeStage(){
				//获取当前第一级下拉框内容
				var stage1Value=document.getElementById("stge").value;
				//获取第二级下拉框内容
				var courseSel=document.getElementById("coure");
				//清空第二级课程下拉框
				courseSel.options.length=0;
				
				//根据第一级下拉框绑定第二级下拉框的内容项
				for(var i in course){
					//在数组中匹配选中的值
					if(i==stage1Value){
						for(var j in course[i]){
							//给级联下拉列表添加列表项
							courseSel.add(new Option(course[i][j],course[i][j]),null)
						}
					}
				}
			}
		</script>
	</head>
	<body style="width: 800px;font-size: larger;">
		<h1 align="center">课程评价</h1>
		<p>阶段选择：
			<select id="stge" style="width: 300px; height: 60px;" onchange="changeStage();">
				<option>---请选择所处阶段---</option>
			</select>
			课程选择：
			<select id="coure" style="width: 300px; height: 60px;">
				<option>---请选择所学课程---</option>
			</select>
		</p>
		
		
	</body>
</html>
